<template>
    <ul class="goodsAct">
      <li class="goodsActItem" v-for="item in items" v-on:click="itemClick(item)" v-bind:key="item.id">
        <div>
          <img class="goodsActPic" v-bind:src="$Api.API_BASE_PIC + item.img" />
          <div>商品名称: {{item.name}}</div>
          <div>售价: {{item.price}} $ </div>
          <div class="desc">{{item.desc}}</div>
        </div>
      </li>
    </ul>
</template>

<script>

export default {
  name: 'activity',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      items: []
    }
  },
  computed: {
    lodding() {
      return this.items.length === 0
    }
  },
  created() {
    this.$post(this.$Api.API_GOODS_ACTIVITY).then(res => {
      this.items = res.data;
    }, err => {
      alert(err.message)
    })
  },
  components: { },
  methods: {
    itemClick(item) {
      this.$router.push({ path: 'goodsDetail', query: { id: item.id } })

      //动态参数
      //this.$router.push({ name: 'goodsDetail', params: { id: item.id}})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

div .desc {
  color: red
}

.goodsAct{
  border: solid 1px blueviolet;
}

.goodsActItem{
  list-style-type:none;
  border: solid 1px blueviolet;
  height: 300px;
}

.goodsActPic {
  width: 160px;
  height: 170px;
}

</style>
